<template>
  <div class="mbr-manager">
      <div class="query-form">    
          <!-- 查询区域 -->
          <!-- 
          ref="form"：给表单设置一个引用，方便在脚本中操作表单，例如重置表单。
          :inline="true"：让表单内的元素在同一行显示。
          :model="mbr"：把表单的数据绑定到 mbr 对象上，表单元素的输入值会同步到 mbr 对象的对应属性中。 
          -->
          <el-form ref="form" :inline="true" :model="mbr">
              <!-- 
              label 属性：显示表单字段的标签。
              prop 属性：指定表单字段对应的 mbr 对象的属性名。 
              -->
              <el-form-item label="受保人类型" prop="MBR_TYPE">
                  <!-- 
                  v-model="mbr.MBR_TYPE" ：使用 v-model 指令将输入框的值与user对象的userId属性进行双向绑定。
                  placeholder 属性：显示输入框的提示信息。 
                  -->
                  <el-input v-model="mbr.MBR_TYPE" placeholder="请输入受保人类型"/>
              </el-form-item>
              <el-form-item label="受保人ID" prop="MBR_NO">
                  <el-input v-model="mbr.MBR_NO" placeholder="请输入受保人ID"/>
              </el-form-item>
              <el-form-item label="受保人身份证" prop="ID_CARD_NO">
                  <el-input v-model="mbr.ID_CARD_NO" placeholder="请输入受保人身份证"/>
              </el-form-item>
              <el-form-item>
                  <!-- 
                  type="primary"：将按钮设置为主要按钮样式。
                  @click="handleQuery"：点击 “查询” 按钮时，触发 handleQuery 方法来查询用户列表。
                  @click="handleReset('form')"：点击 “重置” 按钮时，触发 handleReset 方法并传入表单引用名，以重置表单。 
                  -->
                  <el-button type="primary" @click="handleQuery">查询</el-button>
                  <el-button @click="handleReset('form')">重置</el-button>
              </el-form-item>
          </el-form>
      </div>
      <div class="base-table">
          <!-- 列表区域 -->
          <!-- 
          :data="mbrList"：将表格的数据绑定到 mbrList 数组上，表格会显示 mbrList 中的数据。
          @selection-change="handleSelectionChange"：当表格中的选中项发生变化时，触发 handleSelectionChange 方法。 
          -->
          <el-table :data="mbrList" @selection-change="handleSelectionChange">
              <!-- 
              type="selection"：创建一个用于多选的列。
              v-for="item in columns"：通过 v-for 指令动态生成表格列，columns 是一个数组，每个元素定义了一列的配置。
              :prop="item.prop"：指定该列对应的数据对象的属性名。
              :label="item.label"：设置列的标题。
              :width="item.width"：设置列的宽度。
              -->
              <el-table-column type="selection" width="55" />
              <el-table-column
                  v-for="item in columns"
                  :key="item.prop"
                  :prop="item.prop" 
                  :label="item.label" 
                  :width="item.width"
                  align="center"
              >
              </el-table-column>
              <!-- 
              label="操作"：设置列的标题为 “操作”。
              <template #default="scope">：使用作用域插槽，scope.row 表示当前行的数据。
              @click="handleEdit(scope.row)"：点击 “编辑” 按钮时，触发 handleEdit 方法并传入当前行的数据。
              @click="handleDel(scope.row)"：点击 “删除” 按钮时，触发 handleDel 方法并传入当前行的数据。 
              -->
          </el-table>
          <!-- 
          background：为分页器添加背景样式。
          layout="prev, pager, next"：设置分页器的布局，包含上一页、页码和下一页按钮。
          :total="pager.total"：设置总记录数。
          :page-size="pager.pageSize"：设置每页显示的记录数。
          @current-change="handleCurrentChange"：当页码发生变化时，触发 handleCurrentChange 方法。 
          -->
          <el-pagination 
              class="pagination"
              background
              layout="prev, pager, next" 
              :total="pager.total || 1"
              :page-size="pager.pageSize"
              @current-change="handleCurrentChange"
          />
      </div>
  </div>
</template>

<script>
// getCurrentInstance：用于在 setup 函数中获取当前组件实例，可借此访问全局属性和方法。
// onMounted：Vue 3 的生命周期钩子，在组件挂载到 DOM 后执行回调函数。
// reactive：用于创建响应式对象，对象的属性变更会触发视图更新。
// ref：用于创建响应式数据，通常用于基本数据类型。
// toRaw：将响应式对象转换为普通对象。
// utils：从 @/utils/utils.js 导入的自定义工具模块
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from 'vue'
import utils from '@/utils/utils.js'
export default {
  name:'mbrManager', // name：组件的名称，方便调试和识别。
  setup(){  // setup：Vue 3 的组合式 API 入口函数，用于编写组件逻辑。
      // 通过 getCurrentInstance 获取的当前组件实例的代理对象，可用于访问全局属性和方法，如 proxy.$api 用于调用 API。
      // 获取 composition api 的全局对象
      const { proxy  } = getCurrentInstance(); 
      // 初始化用户表单对象，响应式对象，存储查询表单的数据，初始状态为 1（在职）
      const mbr = reactive({
        MBR_TYPE: '',
        MBR_NO: '',
        ID_CARD_NO: ''
      });
      // 响应式数组，初始化用户列表数据
      const mbrList = ref([]);
      // 响应式对象，初始化分页对象
      const pager = reactive({
          pageNum: 1,
          pageSize: 10,
      })
      // 选中 MBR 列表的对象
      const checkedMbrIds = ref([])

      // 定义动态表格-格式
      const columns = reactive([
        {
            label: '受保人类型',
            prop: 'MBR_TYPE',
        },
        {
            label: '受保人ID',
            prop: 'MBR_NO',
        },
        {
            label: '身份证号',
            prop: 'ID_CARD_NO',
        },
        {
            label: '历史次数',
            prop: 'all_history',
        },
        {
            label: '欺诈次数',
            prop: 'fraud_history',
        }
      ]);
      // 初始化接口调用
      // onMounted：组件挂载后，调用  getMbrList() 方法
      onMounted(() => {
        getMbrList();
      });
      // 获取 MBR 列表
      const getMbrList = async () => {
        let params = { ...mbr, ...pager };
        try {
            const { list, page } = await proxy.$api.getMbrList(params);
            mbrList.value = list;
            pager.total = page.total;
        } catch (error) {}
      };
      // 查询事件，获取 MBR 列表
      const handleQuery = () => {
        getMbrList();
      };
      // 重置查询表单 通过 proxy.$refs 获取表单引用，并调用 resetFields 方法重置表单。
      const handleReset = (form)=>{
          proxy.$refs[form].resetFields();
      }
      // 分页事件处理 当页码改变时，更新 pager.pageNum 为当前页码，并调用 getMbrList 方法重新获取用户列表。
      const handleCurrentChange = (current)=>{
          pager.pageNum = current;
          getMbrList();
      }
      
      // 表格多选
      const handleSelectionChange = (list) => {
        console.log('>', list);
        let arr = [];
        list.map(item => {
            arr.push(item.MBR_NO);
        });
        checkedMbrIds.value = arr;
      };

      return {
        mbr,
        mbrList,
        columns,
        pager,
        checkedMbrIds,
        getMbrList,
        handleQuery,
        handleReset,
        handleCurrentChange,
        handleSelectionChange
      };
  }
}
</script>

<style lang="scss">
.mbr-manager {
  padding: 20px;
  background-color: #f5f7fa;
  .query-form {
    background-color: #ffffff;
    padding: 22px 20px 0;
    border-radius: 5px;
    .el-select {
      width: 80px;
    }
  }
  .base-table {
    border-radius: 5px 5px 0px 0px;
    background: #ffffff;
    padding: 20px;
    border-bottom: 1px solid #e4e8e8;
    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end; /* 靠右对齐 */
    }
  }
}
</style> 